import { Component,Input,OnChanges } from '@angular/core';

declare var PhotoSwipe: any;
declare var PhotoSwipeUI_Default: any;
declare var document: any;

/**
 * 
 */
 @Component({
    selector: 'x-img',
    templateUrl: 'x-img.html'
 })
 export class XImgComponent implements OnChanges {

    @Input() images:any = [];
    @Input() _details:string = ""; //特征标记字符
    @Input() g_id:string = ""; //缩略图所在元素 ID
    items=[];
    pswpElement;
    gallery;

    constructor() {

    }
    ngOnChanges(ch) {

        var len = this.images.length;
        if (len != 0) {
            
            try {

                for (var i = 0; i < len; i++) {
                    if (this.images[i]["src"].length > 9) {
                        var objs = {};
                        objs["src"] = this.images[i]["src"];
                        objs["w"] = this.images[i]["width"];
                        objs["h"] = this.images[i]["height"];
                        objs["title"] = this.images[i]["title"];
                        this.items.push(objs);
                    }
                }

            } catch (error) { }
        }

    }
    //查看图
    pswpElementInit(idx) {

        if (this.pswpElement == null) {
            this.pswpElement = document.querySelectorAll('.pswp')[0];
        }

        var _that = this;

        // define options (if needed)
        var options:any = {
            // optionName: 'option value'
            index: idx * 1, // start at first slide
            shareEl : false,
            fullscreenEl : false,
            //关闭图片动画效果
            getThumbBoundsFn: function(index) {
                // find thumbnail element
             var thumbnail = document.querySelectorAll('.gallery-' + _that._details +_that.g_id)[idx];

                // get window scroll Y
                var pageYScroll = window.pageYOffset || document.documentElement.scrollTop; 
                // optionally get horizontal scroll

                // get position of element relative to viewport
                var rect = thumbnail.getBoundingClientRect(); 

                // w = width
                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
            },

        };


        // Initializes and opens PhotoSwipe  
        this.gallery = new PhotoSwipe(this.pswpElement, PhotoSwipeUI_Default, this.items, options);
        this.gallery.listen('close', function () {
            //你要监听关闭浏览事件的话
        });

        this.gallery.init();

    }



 }

 